<!-- Reusable form that can be used to create a new event or to update an existing one. Receives as parameter the managed bean that will take care of the form. -->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <!-- Reusable component parameters -->
    <composite:interface>
        
        <!-- The bean that will take care of the form, sub-class of the AbstractEventBean -->
        <composite:attribute name="bean" type="it.polimi.se2.meteocal.beans.AbstractEventBean" required="true"/>
        
    </composite:interface>

    <!-- Reusable component implementation -->
    <composite:implementation>

        <p:panel styleClass="event_form_container">
        
            <h1>#{cc.attrs.bean.formTitle}</h1>

            <h:form id="event_form">

                <p:growl id="growl" showDetail="true" showSummary="false" autoUpdate="true" redisplay="true"/>

                <p:panelGrid columns="2" styleClass="table_no_border">

                    <!-- Register general validator for the whole form -->
                    <f:event listener="#{cc.attrs.bean.validateEventData}" type="postValidate" />


                    <p:outputLabel value="Name" for="name"/>
                    <p:inputText id="name" value="#{cc.attrs.bean.current.name}">
                        <p:ajax update="growl"/>
                    </p:inputText>
                    
                    <p:outputLabel value="City" for="city"/>
                    <p:inputText id="city" value="#{cc.attrs.bean.current.city}">
                        <p:ajax update="growl"/>
                    </p:inputText>
                    
                    <p:outputLabel value="Location Details (e.g. street name, builing, etc.)" for="locationDetails"/>
                    <p:inputText id="locationDetails" value="#{cc.attrs.bean.current.locationDetails}"/>
                    
                    <p:outputLabel value="Is this taking place outdoor?" for="outdoor"/>
                    <p:selectBooleanCheckbox  id="outdoor" value="#{cc.attrs.bean.current.outdoor}"/>
                    
                    <p:outputLabel value="Day" for="day"/>
                    <p:calendar id="day" value="#{cc.attrs.bean.current.day}" pattern="dd-MM-yyyy" locale="it_IT" timeZone="CET"/>
                    
                    <p:outputLabel value="From" for="startTime"/>
                    <p:calendar id="startTime" value="#{cc.attrs.bean.current.startTime}" pattern="HH:mm" timeOnly="true"  locale="it_IT" timeZone="CET"/>
                    
                    <p:outputLabel value="To" for="endTime"/>
                    <p:calendar id="endTime" value="#{cc.attrs.bean.current.endTime}" pattern="HH:mm" timeOnly="true"  locale="it_IT" timeZone="CET"/>

                </p:panelGrid>

                <c:if test="#{cc.attrs.bean.allowInvitations()}">
                    <div id="invitations_section">
                        <h3>Invite other users</h3>                        
                        <p:pickList id="invitedUsers" styleClass="invitation_picklist" value="#{cc.attrs.bean.usersToInvite}" var="user" itemValue="#{user}" itemLabel="#{user.firstName} #{user.lastName} [#{user.email}]" converter="userConverter">

                            <f:facet name="sourceCaption">Users</f:facet>
                            <f:facet name="targetCaption">To invite</f:facet>

                            <p:column width="100%">
                                <h:outputText value="#{user.firstName} #{user.lastName} [#{user.email}]"/>
                            </p:column>
                            
                        </p:pickList>
                    </div>
                </c:if>

                <p:commandButton id="event_form_button" value="Confirm" action="#{cc.attrs.bean.formSubmitButton()}"/>
                
                <p:blockUI block="event_form" trigger="event_form_button">
                    LOADING...
                    <br/>
                    <h:graphicImage library="images" name="loading.gif" height="32px"/>
                </p:blockUI>

            </h:form>
        </p:panel>       

    </composite:implementation>
    
</html>